<template>
  <div class="about">
    <div>
      <el-row>
        <el-col :span="2">
          <el-button @click="add">添加</el-button>
        </el-col>
        <el-col :span="16">
          &nbsp;
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="18">
              <el-input  v-model="params.name" placeholder="请输入内容"></el-input>
            </el-col>
            <el-col :span="2">
              &nbsp;
            </el-col>
            <el-col :span="4">
              <el-button @click="xg" icon="el-icon-search" type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="课程名称" width="180">
          </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope"> <!-- 或者使用 v-slot:default="scope" -->
            <el-button type="success" size="mini" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="dele(scope.row.id)" size="mini">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </template>
      <el-pagination :current-page="page" @current-change="currentChange" style="margin-top: 24px; text-align: center;"
      background layout="prev, pager, next" :total="totr"></el-pagination>

    </div>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-form-item label="课程名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="授课教师">
          <el-select v-model="form.teacherId" placeholder="请选择活动区域">
            <el-option label="老师1" value="1"></el-option>
            <el-option label="老师2" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级">
          <el-input type="number" v-model="form.grade" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-select v-model="form.week" placeholder="请选择星期">
            <el-option label="星期一" value="1"></el-option>
            <el-option label="星期二" value="2"></el-option>
            <el-option label="星期三" value="3"></el-option>
            <el-option label="星期四" value="4"></el-option>
            <el-option label="星期五" value="5"></el-option>
            <el-option label="星期六" value="6"></el-option>
            <el-option label="星期日" value="7"></el-option>
          </el-select>
          <el-select v-model="form.section" placeholder="请选择第几节">
            <el-option v-for="item in 9" :key="item" :label="'第' + item + '节'" :value="item + ''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时长（节）">
          <el-input type="number" v-model.number="form.duration" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上课地点">
          <el-input v-model="form.location" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学分">
          <el-input v-model="form.credit" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大容量">
          <el-input v-model="form.maxSize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试地点">
          <el-input v-model="form.examLocation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-date-picker v-model="form.examDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { courseList, courseAdd, courseDetail, courseEdit, Coursexg,deleteCourse } from "@/api"
export default {
  data() {
    return {
      input: "",
      tableData: [],
      params: {
        name: '',
      },
      page: 1,
      totr: 0,
      page: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        credit: 2,
        examDate: "",
        examLocation: "",
        grade: 2019,
        id: -1,
        location: "",
        maxSize: 50,
        teacherId: "",
        week: "2",
        section: "2",
        duration: "2",
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    dele(id) {
      deleteCourse(id).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getCourseList()
          
        }
      })
    },
    xg() {
      this.getCourseList()
      this.page = 1
      this.getCursexg()
     
    },
    getCursexg() {
      Coursexg(this.params).then(res => {
        console.log(res, "YES");
        if (res.code === 0) {
          this.totr = res.data * 10
        }
      })
    },
    getCourseList() {
      courseList(this.params, this.page).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.tableData = res.data
        }

      })
    },
    currentChange(v) {
      // console.log(v);
      this.page = v
      this.getDepartment()
    }  ,  
    // 添加
    add() {
      this.dialogFormVisible = true
    },
    // 处理添加
    handleAdd() {
      this.form["time"] = [this.form.week, this.form.section, this.form.duration].join("-")
      console.log(this.form);
      if (this.form.id == -1) {
        courseAdd(this.form).then(res => {
          console.log(res);
        })
      } else {
        courseEdit(this.form).then(res => {
          console.log(res);
        })
      }
    },
    // 编辑  (先获取详情，再进行编辑)
    edit(id) {
      console.log(id);
      // 获取详情
      courseDetail(id).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.form = res.data;
          // res.data 有没有  week,section,duration

          // this.form

          this.dialogFormVisible = true
          const arr = this.form.time.split("-")
          // this.form["week"] = arr[0]
          // this.form["section"] = arr[1]
          // this.form["duration"] = arr[2]
          // 对象新增 week,section,duration  导致页面不变化的问题
          // 解决方案 $set 
          // Object.definedpropty(对象,属性)
          this.$set(this.form, "week", arr[0])
          this.$set(this.form, "section", arr[1])
          this.$set(this.form, "duration", arr[2])

        }
      })

    }
  },
  mounted() {
    this.getCourseList()
  }
}
</script>
